<template>
    <div class="sliding">
      <div class="sliding-mask" v-show="showSlide" :class="{'fade-enter-active': enter, 'fade-leave-active': leave}"></div>
      <article class="slide-pop" v-show="showSlide" :class="{'slide-enter-active': enter, 'slide-leave-active': leave}">
      <span class="close" @click="hideSlide">
            <i class="iconfont icon-close_circle_line"></i>
      </span>
        <div class="slide-bd slide-notitle">
          <article class="disease-type">
            <div class="navigation after-bd-b">
              <nav class="nav">
                <a v-for="(item, index) in diseaseData" href="javascript:;" class="item after-bd-b needsclick" :class="{'cur': (index === curIndex)}" :key="index" @click="switchPol(item.pid, index)">{{item.pName}}</a>
              </nav>
            </div>
            <div class="nav-list">
              <div class="item after-bdr" v-if="polDiseaseData.servere.length" @click="switchData('servere')" :class="{'cur': dataType === 'servere'}">{{polDiseaseData.servere.length}}种重疾</div>
              <div class="item after-bdr" v-if="polDiseaseData.mild.length" @click="switchData('mild')" :class="{'cur': dataType === 'mild'}">{{polDiseaseData.mild.length}}种轻症</div>
            </div>
            <div class="disease-pane-wrap" :style="{height: contentHeight}" >
              <div class="disease-pane" ref="diseaseWrap">
                <div>
                <dl class="dis-category">
                  <dd v-for="(item, index) in data" :key="index">
                    <div class="exhibit-box after-bd-b">
                      <div class="hd" @click="showDes(index)">
                        <div class="title">{{(index + 1)}}.{{item.diseaseName}}</div>
                        <a href="javascript:void (0);">
                          <span></span>
                          <i class="iconfont" :class="{'icon-arrows_down': !data[index].show, 'icon-arrows_up': data[index].show}"></i>
                        </a>
                      </div>
                      <div class="bd">
                        <div class="des" v-if="data[index].show">
                          <h6>描述：</h6>
                          <p>{{item.diseaseDetail}}</p>
                        </div>
                      </div>
                    </div>
                  </dd>
                </dl>
                </div>
              </div>
            </div>
          </article>
        </div>
      </article>
    </div>
</template>

<script>
import BSscroll from 'better-scroll'
export default {
  name: 'disease',
  props: ['show', 'diseaseData'],
  data () {
    return {
      enter: false,
      leave: false,
      showSlide: false,
      contentHeight: '',
      title: '',
      data: [],
      mildData: [],
      servereData: [],
      dataType: 'servere',
      polDiseaseData: {
        servere: [],
        mild: []
      },
      scroll: null,
      pid: '',
      curIndex: ''
    }
  },
  mounted () {
    this.contentHeight = window.innerHeight * 0.9 - 98 + 'px'
    let scrollWrap = this.$refs.diseaseWrap
    this.scroll = new BSscroll(scrollWrap, {
      scrollX: false,
      scrollY: true,
      preventDefault: false,
      probeType: 3
    })
  },
  methods: {
    hideSlide () {
      this.$emit('diseaseStatus', !this.show)
    },
    showDes (index) {
      if (this.data[index].show) {
        let item = this.data[index]
        item.show = false
        this.$set(this.data, index, item)
      } else {
        let item = this.data[index]
        item.show = true
        this.$set(this.data, index, item)
      }
    },
    switchData (type) {
      this.dataType = type
      this.data = this[type + 'Data']
      this.scroll.refresh()
      this.scroll.scrollTo(0, 0)
    },
    switchPol (pid, index) {
      this.curIndex = index
      this.polDiseaseData = this.diseaseData[pid]
      this.servereData = []
      this.mildData = []
      for (let item of this.polDiseaseData.servere) {
        this.servereData.push(item)
      }
      for (let item of this.polDiseaseData.mild) {
        this.mildData.push(item)
      }
      this.data = this.servereData
      this.scroll.refresh()
      this.scroll.scrollTo(0, 0)
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.enter = true
        this.showSlide = val
        document.body.style.position = 'fixed'
        setTimeout(() => {
          this.enter = false
        }, 500)
      } else {
        this.leave = true
        document.body.style.position = ''
        setTimeout(() => {
          this.showSlide = val
          this.leave = false
        }, 200)
      }
    },
    diseaseData (val) {
      if (val) {
        let key
        let keyArray = []
        for (let item in val) {
          keyArray.push(item)
        }
        key = keyArray[0]
        this.curIndex = key
        this.polDiseaseData = val[key]
        this.servereData = []
        this.mildData = []
        for (let item of this.polDiseaseData.servere) {
          this.servereData.push(item)
        }
        for (let item of this.polDiseaseData.mild) {
          this.mildData.push(item)
        }
        this.data = this.servereData
        this.scroll.refresh()
        this.scroll.scrollTo(0, 0)
      }
    }
  }
}
</script>

<style scoped>
  .sliding {
    position: fixed;
    z-index: 999;
  }
  * {
    padding: 0;
    margin: 0;
  }
  *, :after, :before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }
  .sliding-mask {
    top: 0;
    z-index: 1000;
    height: 100%;
    background: rgba(0,0,0,.6);
    transform-style: preserve-3d;
  }
  .slide-pop, .sliding-mask {
    position: fixed;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
  }
  .slide-pop, .sliding-mask {
    position: fixed;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
  }
  .slide-pop {
    z-index: 1001;
    top: 10%;
    bottom: 0;
    background-color: #fff;
  }
  .slide-pop .close {
    z-index: 1001;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .slide-pop .close {
    top: -45px!important;
    color: #fff!important;
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .slide-pop .close i {
    font-size: 24px;
  }
  .slide-pop .slide-bd {
    height: 100%;
    border-top: 45px solid #fff;
    font-size: 13px;
    line-height: 20px;
  }
  .slide-pop .slide-notitle {
    border-top: 0;
  }
  .disease-type {
    color: #333;
    background-color: #fff;
  }
  .after-bd-b, .after-bd-r {
    position: relative;
  }
  .navigation {
    overflow-x: scroll;
    width: 100%;
    height: 40px;
    background: #fff;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .navigation {
    margin-bottom: -1px;
  }
  .navigation .nav {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 0;
  }
  .disease-type .navigation .nav .item {
    width: auto;
    padding: 0 5px;
  }
  .navigation .nav .item {
    position: relative;
    width: 33.3%;
    height: 100%;
    display: inline-block;
    font-size: 15px;
    background-color: #fff;
    color: #999;
    outline: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .dialog .dialog-fd>a, .navigation .nav .cur {
    color: #5081dc;
  }
  .navigation .nav a {
    position: relative;
    width: 33.3%;
    height: 100%;
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    color: #999;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .navigation .nav a {
    position: relative;
    width: 33.3%;
    height: 100%;
    display: inline-block;
    padding: 0 10px;
    font-size: 16px;
    color: #999;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  .after-bd-b, .after-bd-r {
    position: relative;
  }
  :link, :visited {
    text-decoration: none;
  }
  .navigation .nav .item:before {
    z-index: 2;
    content: "";
    position: absolute;
    bottom: 0;
    opacity: 0;
    left: 41%;
    width: 18%;
    height: 4px;
    border-radius: 100px;
  }
  .navigation .nav .cur:before {
    background-color: #5081dc;
  }
  .navigation .nav .cur:before {
    opacity: 1;
  }
  .navigation .nav a:before {
    z-index: 1;
    content: "";
    position: absolute;
    bottom: 0;
    opacity: 0;
    left: 41%;
    width: 18%;
    height: 4px;
    border-radius: 100px;
  }
  .after-bd-b:after, .after-bd-r:after {
    position: absolute;
    background: #e5e5e5;
    content: "";
    pointer-events: none;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
  .after-bd-b:after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(.5);
  }
  .nav-list {
    padding: 15px 15px 6px;
    font-size: 12px;
    margin-left: -9px;
  }
  .disease-type .nav-list .cur {
    color: #fff;
    background-color: #5081dc;
  }
  .disease-type .nav-list .item {
    color: #5081dc;
    background-color: #eef6ff;
  }
  .disease-type .nav-list .item {
    display: inline-block;
    padding: 5px 6px;
    margin-bottom: 9px;
    margin-left: 9px;
    line-height: 1.4;
    font-size: 13px;
    border-radius: 4px;
  }
  .after-bdr {
    position: relative;
    border: none;
  }
  .disease-type .nav-list .item:after {
    border-color: #5081dc;
  }
  .disease-type .nav-list .item:after {
    border-radius: 8px;
  }
  .after-bdr:after {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    border: 1px solid #e5e5e5;
    content: "";
    pointer-events: none;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
  .disease-type .disease-pane-wrap {
    overflow: hidden;
    height: 100%;
    line-height: 22px;
    color: #999;
  }
  .disease-type .disease-pane-wrap .disease-pane {
    height: 100%;
  }
  .slide-enter-active {
    animation: fadeInUp .3s
  }

  .slide-leave-active {
    animation: fadeInDown .3s
  }

  .fade-enter-active {
    animation: fadeIn .5s
  }

  .fade-leave-active {
    animation: fadeOut .5s
  }
  @keyframes fadeOut {
    0% {
      opacity: 1
    }
    to {
      opacity: 0
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes fadeInDown {
    0% {
      opacity: 1;
      transform: none
    }
    to {
      opacity: 0;
      transform: translate3d(0, 100%, 0)
    }
  }
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0)
    }
    to {
      opacity: 1;
      transform: none
    }
  }
  .disease-type .nav-list .cur {
    color: #fff;
    background-color: #5081dc;
  }
  .disease-type .nav-list .item {
    display: inline-block;
    padding: 5px 6px;
    margin-bottom: 9px;
    margin-left: 9px;
    line-height: 1.4;
    font-size: 13px;
    border-radius: 4px;
  }
  .disease-type .nav-list .item:after {
    border-color: #5081dc;
  }
  .disease-type .nav-list .item:after {
    border-radius: 8px;
  }
  .dis-category {
    position: relative;
  }
  .dis-category .exhibit-box {
    line-height: 1.2;
  }
  .exhibit-box>.hd {
    display: flex;
    padding: 15px;
    background-color: #fff;
  }
  .exhibit-box>.hd .title {
    flex: 1;
  }
  .dis-category .exhibit-box>.hd .title {
    font-size: 15px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .exhibit-box>.hd a {
    flex: 50px 0 0;
    color: #999;
    outline: none;
  }
  .dis-category .exhibit-box>.hd a {
    text-align: right;
    font-size: 18px;
  }
  :link, :visited {
    text-decoration: none;
  }
  .dis-category .des, .dis-category .remarks {
    padding: 0 15px 15px;
    font-size: 14px;
  }
  .dis-category .des h6, .dis-category .remarks h6 {
    margin-bottom: 6px;
  }
  .dis-category .des p, .dis-category .remarks p {
    white-space: pre-line;
    text-align: justify;
  }
</style>
